<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body, ul {
            margin: 0;
            padding: 0;
        }

        .list_con {

            width: 1000px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto 0;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }

        .list_con ul {
            list-style: none;
            width: 2000px;
            height: 200px;
            position: absolute;
            /* 样式的值如果是0，可以不写单位 */
            left: 0;
            top: 0;
        }


        .list_con li {
            width: 180px;
            height: 180px;
            float: left;
            margin: 10px;
        }

        .btns_con {
            width: 1000px;
            height: 30px;
            margin: 50px auto 0;
            position: relative;
        }

        .left, .right {
            width: 30px;
            height: 30px;
            background-color: gold;
            position: absolute;
            left: -40px;
            top: 124px;
            font-size: 30px;
            line-height: 30px;
            color: #000;
            font-family: 'Arial';
            text-align: center;
            cursor: pointer;
            border-radius: 15px;
            opacity: 0.5;
        }

        .right {
            left: 1010px;
            top: 124px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
			var oList = document.getElementById('list');
            var iLift = 0;

            var oBtnLeft = document.getElementById('btn01');
            var oBtnRight = document.getElementById('btn02')

            var oSideDiv = document.getElementById('slide')

            var move = 3;

            var oClin = setInterval(funMove, 30);

            var oOnlFlag = 0;

            oSideDiv.onmouseover = function() {
                oOnlFlag = move;
                move = 0;
            }

            oSideDiv.onmouseout = function() {
                move = oOnlFlag;
            }

            oBtnLeft.onclick = function() {
                move = -3;
            }

            oBtnRight.onclick = function() {
                move = 3;
            }



            oList.innerHTML = oList.innerHTML + oList.innerHTML

            
            function funMove() {
                iLift += move;
                oList.style.left = iLift + 'px';

                if (iLift <= -1000) {
                    iLift = 0
                    oList.style.left = iLift + 'px';
                }

                if (iLift>0) {
                    iLift = -1000;
                    oList.style.left = iLift + 'px';
                }

            }




        }

    </script>
</head>
<body>
<div class="btns_con">
    <div class="left" id="btn01">&lt;</div>
    <div class="right" id="btn02">&gt;</div>
</div>
<div class="list_con" id="slide">
    <ul id="list">
        <li><a href=""><img src="../images/goods001.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="../images/goods002.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="../images/goods003.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="../images/goods004.jpg" alt="商品图片"></a></li>
        <li><a href=""><img src="../images/goods005.jpg" alt="商品图片"></a></li>
    </ul>
</div>
</body>
</html>

